<template>
    <view class="bill-container flex fd-c">
        <topBar :back="true">
            <template #center>
                <!-- 导航栏 -->
                <view class="nav-bar flex ai-c jc-c">
                    <view class="nav-tabs flex ai-c" style="font-size: 32rpx;font-weight: 700;color: #333;">
                        修改昵称
                    </view>
                </view>
            </template>
        </topBar>
        <!-- 内容区域 -->
        <scroll-view class="scrollable-content" scroll-y>
            <view class="announcement-item flex jc-sb ai-c">
                <view class="detail-label" style="width: 30%;">昵称</view>
                <view class="detail-value flex ai-c" style="width: 70%;">
                    <input type="text" placeholder="请输入昵称" style="margin-right: 34rpx;text-align: right;width: 100%;"
                        v-model="nickname">
                </view>
            </view>
        </scroll-view>
        <view class="submit-btn" @click="handleSubmit"> 提交 </view>
    </view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import api from '@/api'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/index.js'
const userStore = useUserStore()
const nickname = ref('')
onLoad(() => {
    nickname.value = userStore.userInfo?.nickname
})

const handleSubmit = () => {
    api.updateUserInfo({
        ...userStore.userInfo,
        nickname: nickname.value,
        user_id: userStore.userInfo?.id
    }).then(res => {
        console.log(res)
        userStore.setUserInfo({ ...userStore.userInfo, nickname: nickname.value })
        uni.showToast({ title: '修改成功', icon: 'success' })
        uni.navigateBack()
    })
}
</script>

<style scoped>
.bill-container {
    height: 100vh;
    background-color: #f7f7f7;
    position: relative;
    display: flex;
    flex-direction: column;
}

.scrollable-content {
    padding: 32rpx;
    box-sizing: border-box;
}

.announcement-item {
    padding: 32rpx;
    background-color: #fff;
    border-radius: 32rpx;
    margin-bottom: 24rpx;
}

.detail-label {
    font-size: 26rpx;
    color: #333;
}

.detail-value {
    font-size: 26rpx;
    color: #333;
}

.submit-btn {
    width: 90%;
    margin: 0 auto;
    height: 80rpx;
    background-color: #0F50DC;
    color: #fff;
    text-align: center;
    border-radius: 80rpx;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 80rpx;
    margin-bottom: 32rpx;
}

</style>
